class Magnifier{
    constructor(el){
        this.el = document.querySelector(el)
        this.small = this.el.querySelector('.small')
        this.mask = this.el.querySelector('.mask')
        console.log(this.mask)
        this.big = this.el.querySelector('.big')
        this.yiruObj()
        this.yichuObj()
        this.bigmove()
        this.moveObj()
    }

    yiruObj (){
        this.small.onmouseenter =()=>{
        this.mask.style.display="block"
        this.big.style.display="block"
        }
    }
    yichuObj (){
        this.small.onmouseleave = ()=>{
        this.mask.style.display="none"
        this.big.style.display="none"
        }
    }
    moveObj (){
        this.small.onmousemove = (evt) =>{
            let e = evt || window.event
            let left = e.pageX-this.small.offsetLeft-this.mask.offsetWidth/2-100
             console.log(left)
            let top = e.pageY-this.small.offsetTop-this.mask.offsetHeight/2-100
            console.log(top)
            if(left<0) left = 0
            if(top<0) top = 0
            let maxLeft = this.small.offsetWidth - this.mask.offsetWidth
            let maxTop = this.small.offsetHeight - this.mask.offsetHeight
            if (left>maxLeft) left = maxLeft
            if (top>maxTop) top = maxTop
            this.mask.style.left = left + 'px'
            this.mask.style.top = top + 'px'
            this.bigmove(left,top)
        }
    }
    bigmove (left,top){
        this.big.style.backgroundPosition = `-${left*4}px -${top*4}px`
    }
}






